<route lang="json5">
{
  style: {
    navigationBarTitleText: '礼堂风貌',
  },
}
</route>

<template>
  <!-- 禁止滚动穿透 -->
  <page-meta :page-style="`overflow: hidden`"></page-meta>
  <view class="auditorium-scene">
    <view class="dropmenu-wrap">
      <wd-drop-menu custom-class="single">
        <wd-drop-menu-item
          v-show="townState.options.length > 0"
          v-model="townState.value"
          :options="townState.options"
          value-key="orgCode"
          label-key="title"
        />
        <wd-drop-menu-item
          v-show="hallState.options.length > 0"
          v-model="hallState.value"
          :options="hallState.options"
          value-key="id"
          label-key="name"
        />
        <wd-drop-menu-item
          v-model="hallStarState.value"
          :options="hallStarState.options"
          @change="changeQuery"
        />
      </wd-drop-menu>
    </view>
    <view class="detail-info-map">
      <LtMap
        :center="centerValue"
        :marker-array="markerArray"
        @markertap="handleMarkertap"
      ></LtMap>
    </view>
  </view>
</template>

<script setup>
import { getHallStar } from '@/service/dict'
import HallApi from '@/service/hall'
import { uniNavigateTo } from '@/utils'
import LtMap from './components/LtMap.vue'
import {
  DEFAULT_CITY_CODE,
  DEFAULT_COUNTRY_CENTER,
  DEFAULT_COUNTRY_CODE,
  LH_DEPART_CODE,
} from '@/configs/constant'
import { reactive } from 'vue'

/** 地图相关操作 start */
const centerValue = ref(DEFAULT_COUNTRY_CENTER)
const markerArray = ref([])

const handleMarkertap = ({ detail }) => {
  const { markerId } = detail
  const hallId = markerArray.value[markerId].hallId
  uniNavigateTo(`/pages-sub/auditorium/detail/index?id=${hallId}`)
}
/** 地图相关操作 end */

/** 顶部筛选项 start */
const hallStarState = reactive({
  value: 'all', // 默认为全部
  options: [],
})
const getHallStarList = async () => {
  const { code, result } = await getHallStar()
  if (code === 200 && result) {
    const all = {
      label: '全部星级',
      value: 'all',
    }
    hallStarState.options = [all, ...result]
  }
}
getHallStarList()

// const countryCode = ref(DEFAULT_COUNTRY_CODE)
// const changeArea = (value) => {
//   const { city, country, center } = value
//   console.log('changeArea', value)
//   centerValue.value = center
//   countryCode.value = country
//   getHallList()
// }

const changeQuery = (item) => {
  hallStarState.value = item.value
  getHallList()
}

// const getHallList = async () => {
//   const star = hallStarState.value === 'all' ? '' : hallStarState.value
//   const params = {
//     star,
//     regionCode: countryCode.value,
//   }
//   const { code, result } = await HallApi.getHallList(params)
//   if (code === 200 && result) {
//     if (result?.length) {
//       markerArray.value = result.map((item, index) => {
//         return {
//           id: index, // 因为 marker id 的长度限制为最多9位数，而礼堂的id超过了9位，所以用 index 临时代替 id，点击后再进行匹配
//           hallId: item.id,
//           latitude: item.lat,
//           longitude: item.lng,
//           title: item.name,
//         }
//       })
//     }
//   }
// }
// getHallList()
/** 顶部筛选项 end */

// const lhOptions = [{ name: '临海市', adcode: DEFAULT_CITY_CODE }]
// const lhValue = ref(DEFAULT_CITY_CODE)

const townState = reactive({
  value: '',
  options: [],
})

const getLhDepartTree = async () => {
  const params = {
    pid: LH_DEPART_CODE,
    primaryKey: 'orgCode',
  }
  const { code, result } = await HallApi.getDepartTree(params)
  if (result?.length > 0) {
    townState.value = 'all'
    townState.options = [{ title: '全部镇(街)', orgCode: 'all' }, ...result]
  } else {
    townState.options = []
  }
}
getLhDepartTree()

watch(
  () => townState.value,
  () => {
    getHallList()
  },
)

const hallState = reactive({
  value: '',
  options: [],
})

const getHallList = async () => {
  const star = hallStarState.value === 'all' ? '' : hallStarState.value
  hallState.value = ''
  const params = { star }
  if (townState.value === 'all') {
    params.regionCode = DEFAULT_COUNTRY_CODE
  } else {
    params.orgCode = townState.value
  }
  const { code, result } = await HallApi.getHallList(params)
  if (result?.length > 0) {
    hallState.value = 'all'
    hallState.options = [{ name: '全部礼堂', id: 'all' }, ...result]
  } else {
    hallState.options = []
  }
}

const renderHall = () => {
  if (hallState.value === 'all') {
    const opts = hallState.options.slice(1, hallState.options.length) // 去掉全部
    const { lat, lng } = opts[0]
    centerValue.value =
      townState.value === 'all' ? DEFAULT_COUNTRY_CENTER : `${lng},${lat}`
    markerArray.value = opts.map((item, index) => {
      return {
        id: index, // 因为 marker id 的长度限制为最多9位数，而礼堂的id超过了9位，所以用 index 临时代替 id，点击后再进行匹配
        hallId: item.id,
        latitude: item.lat,
        longitude: item.lng,
        title: item.name,
      }
    })
  } else {
    const { lat, lng, name, id } = hallState.options.find(
      (item) => item.id === hallState.value,
    )
    centerValue.value = `${lng},${lat}`
    markerArray.value = [
      {
        id: 0,
        hallId: id,
        latitude: lat,
        longitude: lng,
        title: name,
      },
    ]
  }
}

watch(
  () => hallState.value,
  (val) => {
    if (val) {
      renderHall()
    }
  },
)
</script>

<style lang="scss" scoped>
// .auditorium-scene {
//   position: fixed;
//   inset: 0;
// }

.dropmenu-wrap {
  display: flex;
  width: 100%;

  :deep() .wd-drop-menu {
    flex: 2;

    .wd-drop-menu__arrow {
      top: 50%;
      transform: translateY(-50%);
    }

    .wd-drop-menu__item.is-active {
      .wd-drop-menu__arrow {
        transform: translateY(-50%) rotate(-180deg);
      }
    }
  }

  .single {
    flex: 1;
  }
}
</style>
